<template>
  <px-dialog v-model="visible" width="906px" destroy-on-close append-to-body @close="cancel">
    <template #header>
      <p class="dialog-title">一键打电话</p>
    </template>
    <px-scrollbar :max-height="400">
      <px-form ref="formRef" :inline="true" :model="formValue" :rules="rules" label-position="right" label-width="120px">
        <px-form-item prop="people">
          <px-checkbox-group v-model="formValue.people">
            <px-checkbox v-for="item in detailInfo.commanderList" :key="item.id" :label="item.phone">
              {{ item.commanderName }}
            </px-checkbox>
          </px-checkbox-group>
        </px-form-item>
      </px-form>
    </px-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <px-button @click="cancel">取 消</px-button>
        <px-button type="success" @click="handleSubmit(formRef)">打电话</px-button>
      </div>
    </template>
  </px-dialog>
</template>
<script lang="ts" setup>
import { callApi } from "@/api/erc/alarm";
import { PxMessage } from "px-ui";
import { computed, ref, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["visible", "detailInfo"]);

const visible = computed(() => props.visible);

// 表单校验规则
const rules = computed(() => ({
  people: [{ required: true, message: "请选择接收电话的人", trigger: "change" }]
}));

watchEffect(() => {
  if (visible.value) {
    const checked = props.detailInfo?.commanderList?.map(item => item.phone);
    formValue.value.people = checked;
  }
});

const formValue = ref<Record<string, any>>({});

const formRef = ref();

const cancel = () => {
  emits("closeDialog");
};

const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      await callApi({ alarmId: props.detailInfo.alarmId, phoneList: formValue.value.people });
      PxMessage.success("电话已拨出");
      cancel();
      emits("queryTable");
    }
  });
};
</script>

<style lang="scss" scoped>
.px-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}
.px-checkbox {
  width: 264px;
  height: 48px;
  padding: 13px 16px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  margin: 8px;
}
.dialog-title {
  text-align: center;
  font-size: 16px;
  font-family:
    PingFangSC-Medium,
    PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
.dialog-footer {
  text-align: center;
}
</style>
